﻿<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title> 生成Tab </title>

    <!-- load the dashboard css -->
    <link href="layui/css/layui.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="./icons/font-icons.min.css">
    <link rel="stylesheet" type="text/css" href="./icons/icons.css">
    <script src="../Scripts/jquery/jquery.min.js"></script>
    <script src="../Scripts/QueryString.js" type="text/javascript"></script>
    <script src="../Scripts/config.js" type="text/javascript"></script>
    <script src="../Comm/Gener.js" type="text/javascript"></script>
    <script type="text/javascript" src="./js/vue/vue.js"></script>
    <script type="text/javascript" src="./js/sortjs/Sortable.min.js"></script>
    <script type="text/javascript" src="./layui/layui.js"></script>
    <script type="text/javascript" src="./js/echarts/echarts.min.js"></script>
   <style>
       html,body{width:100%; background:#fff; }
       .tabs{  }
       .tabs-list {
           padding: 10px 10px;
           float: left;
           display: block;
           background: #fff;
           width:100%;
       }
       .tabs-list li {
           float: left;
           margin: 0px 5px 10px;
           border: 1px solid #cfcfcf;
           border-radius: 5px;
           padding: 5px 8px;
           cursor: pointer
       }
       .layui-this {
           background: #226A62;
           color: #fff;
           border: 1px solid #226A62 !important;
       }

       .tabs-body {
          
       }

       .tabs-body .g-admin-tabsbody-item {
           position: absolute;
           top:60px;
           bottom: 0;
           left: 0;
           right: 0;
            width: 100%;
           height: calc(100%-60px);
        
       }
       .g-admin-iframe {
           width: 100%;
           height: 100%;
           left: 0;
           right: 0;
           bottom: 0
       }
       .noshow-tabs{ text-align:center; margin:10% 0 0; font-size:40px; color:#cfcfcf}
   </style>
</head>
<body>
    <div class="tabs" id="Portal-tabs">
        <div v-if="show">
            <div class="tabs-list">
                <ul>
                    <li v-for="(item,index) in tabsListData" :key="index" @click="openTabByMenu(item),selectedId = item.No" :class="{'layui-this': item.No === selectedId,'sub-menu-a ':true}">
                        <i  :class="item.Icon"></i>{{item.Name}}
                    </li>
                </ul>
            </div>
            <div class="tabs-body">
                <div class="g-admin-tabsbody-item">
                    <iframe :src="taburl" frameborder="0" ref="iframe-home" scrolling="yes" class="g-admin-iframe"></iframe>
                </div>
            </div>
        </div>
        <div v-else>
            <div class="noshow-tabs">
                暂无Tab选项
            </div>
        </div>
    </div>
<script>
    var vm = new Vue({
        el: '#Portal-tabs',
        data: function () {
            return {
                tabsListData: [], //tab数据，
                taburl: '',
                selectedId: -1,
                show:1
            }
        },
        methods: {
            openTabByMenu: function (menu) {
                this.taburl = menu.UrlExt
            }
        },
        mounted: function () {

            // fix firefox bug
            document.body.ondrop = function (event) {
                event.preventDefault();
                event.stopPropagation();
            }


            var pageID = GetQueryString("PageID");

            //给标题赋值.
            var menu = new Entity("BP.CCFast.CCMenu.Menu", pageID);
            this.title = menu.Name;

            //获得标签页, 生成标签页.
            var ens = new Entities("BP.CCFast.CCMenu.TabDtls");
            ens.Retrieve("RefMenuNo", pageID, "Idx");
           
            systems = obj2arr(ens)
            for (var i = 0; i < systems.length; i++) {
                var en = systems[i];
                if (i == 0) {
                    this.selectedId = en.No;
                    this.taburl = en.UrlExt;
                }
                var en = systems[i];
                en.open = false
            }
            this.show = systems.length;
            console.log(systems);

            this.tabsListData = systems;
           
        }
    });
    function obj2arr(obj) {
        delete obj.Paras
        delete obj.ensName
        delete obj.length
        var arr = []
        for (var key in obj) {
            if (Object.hasOwnProperty.call(obj, key)) {
                arr.push(obj[key]);
            }
        }
        return arr
    }
</script>

</body>
</html>
